<template>
  <el-form
    class="form-area"
    ref="loginRef"
    :model="loginForm"
    :rules="loginRules"
    autocomplete="on"
    label-position="left"
  >
    <el-form-item prop="username">
      <el-input
        ref="usernameRef"
        v-model="loginForm.username"
        placeholder="请填写用户名或手机号"
        name="username"
        type="text"
        tabindex="1"
        autocomplete="on"
      />
    </el-form-item>

    <el-tooltip
      v-model="capsTooltip"
      content="显示密码"
      placement="right"
      manual
    >
      <el-form-item prop="password">
        <el-input
          :key="passwordType"
          ref="passwordRef"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="请填写密码"
          name="password"
          tabindex="2"
          autocomplete="on"
          @keyup="checkCapslock"
          @blur="capsTooltip = false"
          @keyup.enter="handleLogin"
        />
        <span class="show-pwd" @click="showPwd">
          <svg-icon
            :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
          />
        </span>
      </el-form-item>
    </el-tooltip>
    <div style="position: relative; margin-bottom: 30px; text-align: right">
      <el-button
        :loading="loading"
        type="primary"
        style="width: 100%"
        @click.prevent="handleLogin"
        ></el-button
      >
    </div>
  </el-form>
</template>

<script>
import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
export default defineComponent({
  name: "Login",
  setup() {
    const store = useStore();
    const router = useRouter();
    const loginRef = ref(null);
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码不得少于6位数"));
      } else {
        callback();
      }
    };
    const loginForm = reactive({
      username: "",
      password: "",
    });
    const loginRules = ref({
      username: [
        {
          required: true,
          transform: (value) => (value ? value.trim() : ""),
          message: "请填写账号",
          trigger: "blur",
        },
      ],
      password: [
        { required: true, trigger: "blur", validator: validatePassword },
      ],
    });
    const passwordType = ref("password");
    const capsTooltip = ref(false);
    const loading = ref(false);
    const checkCapslock = (e) => {
      const { key } = e;
      capsTooltip.value = key && key.length === 1 && key >= "A" && key <= "Z";
    };
    const showPwd = () => {
      passwordType.value = passwordType.value === "password" ? "" : "password";
      nextTick(() => {
        passwordRef.value.focus();
      });
    };
    const handleLogin = () => {
      loginRef.value.validate((valid) => {
        if (valid) {
          loading.value = true;
          store
            .dispatch("user/login", loginForm)
            .then((res) => {
              loading.value = false;
              if (res.status === 200) {
                router.push("/");
              } else {
                ElMessage.warning(res.message);
              }
            })
            .catch((res) => {
              loading.value = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    const usernameRef = ref(null);
    const passwordRef = ref(null);
    onMounted(() => {
      if (loginForm.username === "") {
        usernameRef.value.focus();
      } else if (loginForm.password === "") {
        passwordRef.value.focus();
      }
    });
    return {
      usernameRef,
      passwordRef,
      loginRef,
      loginForm,
      loginRules,
      passwordType,
      capsTooltip,
      loading,
      checkCapslock,
      showPwd,
      handleLogin,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/styles/variables.module.scss";
.form-area {
  background: #fff;
  .el-input {
    :deep(input) {
      background: #f2f3f5;
      -webkit-appearance: none;
      padding: 12px 5px 12px 15px;
      height: 56px;
      border-radius: 4px;
      border: 1px solid #d8dce6;
      text-align: center;
      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px #f2f3f5 inset !important;
        // -webkit-text-fill-color: $cursor !important;
      }
    }
  }
  .el-button {
    // padding: 16px 20px;
    height: 92px;
    width: 414px !important;
    border: none;
    border-radius: 0;
    padding: 0;
    position: relative;
    left: -7px;
    // border-radius: 38px;
    background: url('../../../assets/login/button.png') no-repeat 0 0;
    background-size: 100% auto;
    &:hover, &:active,&:focus{
      background: url('../../../assets/login/button.png') no-repeat 0 0;
      background-size: 100% auto;
    }
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    color: #454545;
    &:first-child {
      margin-top: 20px;
    }
    margin-bottom: 20px;
  }
}
.svg-icon {
  vertical-align: -0.05em;
}
.show-pwd {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 16px;
  color: #889aa4;
  cursor: pointer;
  user-select: none;
}
:deep(.el-button--primary) {
  background: $mainColor;
  border-color: $mainColor;
  &:hover {
    background: darken($color: $mainColor, $amount: 0.1);
    border-color: darken($color: $mainColor, $amount: 0.1);
  }
}
</style>
